<template>
  <div class="commonTitle" :style="{ 'border-color': borderColor }" @click="$emit('click')">
    <i
      v-if="isLine"
      class="line"
      :style="{
        'background-color': bgColor
      }"
    />
    <div
      v-if="isIcon"
      class="icon"
      :style="{
        'background-color': '#1b72d3'
      }"
    >
      <i
        class="iconfont"
        :style="{
          color: iconColor
        }"
      />
    </div>
    <span class="title" :class="{ 'title-bigger': titleBiggerSize }" :style="{ color: textColor }" @click="handleTitle">{{ title }}</span>
    <div class="ml-auto">
      <slot name="right" />
    </div>
  </div>
</template>

<script>
import { hexToRgb } from '@/utils'

export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    titleBiggerSize: {
      type: Boolean,
      default: false
    },
    textColor: {
      type: String,
      default: '#000000'
    },
    isLine: {
      type: Boolean,
      default: false
    },
    isIcon: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: '&#xe604;'
    },
    bgColor: {
      type: String,
      default: '#0089ff'
    },
    bgOpacity: {
      type: String,
      default: '0.2'
    },
    iconColor: {
      type: String,
      default: '#fff'
    },
    borderColor: {
      type: String,
      default: '#e5e7ea'
    }
  },
  computed: {
    getBgColor() {
      return hexToRgb(this.bgColor, this.bgOpacity)
    }
  },
  methods: {
    handleTitle() {
      this.$emit('clickBtn')
    }
  }
}
</script>

<style lang="scss" scoped>
.commonTitle {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin-bottom: 30px;

  .line {
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .icon {
    display: block;
    width: 8px;
    height: 44px;
    margin-right: 15px;
    border-radius: 4px;
    line-height: 44px;
    text-align: center;
    i {
      font-size: 29px;
      display: block;
    }
  }

  .title {
    color: #333;
    font-size: 3.5vw;
    line-height: 28px;
  }
  .title-bigger {
    font-size: 34px;
    line-height: 34px;
  }
}
</style>
